<template>
  <div class="bg">
    <div class="head-box">
      <div class="head-text">
        <span>您好，</span><br><span>欢迎回到 {{ config.title }}</span>
      </div>
    </div>
    <div class="login-div">
      <div class="login-box">
        <n-form ref="formRef" :rules="rules" :model="loginForm">
          <n-form-item label="邮箱" path="email">
            <n-input placeholder="请输入邮箱" v-model:value="loginForm.email"/>
          </n-form-item>
          <n-form-item label="密码" path="password">
            <n-input placeholder="请输入密码" v-model:value="loginForm.password" type="password"/>
          </n-form-item>
          <div class="card-btn">
            <n-button type="primary" @click="loginClick()">登录</n-button>
            <n-button @click="goRegister">注册</n-button>
          </div>
        </n-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import config from "@/config";
import {reactive, ref, defineComponent} from 'vue';
import {loginAPI} from '@/api/user';
import storage from '@/utils/stored-data';
import {loginFormType} from '@/types/user';
import {NForm, FormInst, FormRules, NFormItem, NButton, NInput, useMessage} from 'naive-ui';
import router from "@/router";

export default defineComponent({
  setup() {
    const formRef = ref<FormInst | null>(null);
    const message = useMessage();//通知

    const loginForm = reactive<loginFormType>({
      email: "",
      password: "",
    })

    const rules: FormRules = {
      email: [
        {required: true, message: "请输入邮箱", trigger: ['blur', 'input']},
        {type: "email", message: "请输入正确的邮箱地址", trigger: ['blur', 'input']},
      ],
      password: {required: true, message: '请输入密码', trigger: ['blur', 'input']},
    }

    const loginClick = () => {
      formRef.value?.validate((errors) => {
        if (!errors) {
          loginAPI(loginForm).then((res) => {
            if (res.data.code === 2000) {
              storage.set("access_token", res.data.data.access_token, 5);
              storage.set("refresh_token", res.data.data.refresh_token, 14 * 24 * 60);
              storage.set('userInfo', res.data.data.user, 14 * 24 * 60);
              router.push({name: 'Home'});
            } else {
              message.error(res.data.msg);
            }
          }).catch(() => {
            message.error('登录失败');
          });
        } else {
          message.error('请检查输入的数据');
        }
      })
    }

    const goRegister = () => {
      router.push({name: 'Register'});
    }

    return {
      rules,
      config,
      formRef,
      loginForm,
      loginClick,
      goRegister
    }
  },
  components: {
    NForm,
    NFormItem,
    NButton,
    NInput
  }
});
</script>

<style lang="less" scoped>
.bg {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #36ad6a;
}

.head-box {
  width: 100%;
  height: 30rem;

  .head-text {
    text-align: left;
    font-size: 1.2rem;
    color: #fff;
    padding: 3rem 0 0 1rem;
    font-weight: bold;
    line-height: 2.2rem;
  }
}

.login-div {
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: -20rem;
  border-radius: 2rem 2rem 0 0;
  background-color: #fff;

  .login-box {
    padding: 2rem 1rem;

    .card-btn {
      text-align: center;

      button {
        width: 100%;
        margin-top: 1rem;
      }
    }
  }
}
</style>
